<template>
	<view class="content">
		<view class="header-view">
			<image class="bg" src="/static/img/bg.jpeg"></image>
			<view  class="user-info-box">
				<image class="icon" src="/static/logo.png"></image>
				<view class="nick-name">
					<text class="title">{{title}}</text>
					<text class="title">查看或编辑个人资料</text>
				</view>	
			</view>
			
		</view>
		<view class="mid-view">
			<view class="mid-item">
				<text class="yticon">&#xe68e;</text>
				<text>收藏</text>
			</view>
			<view class="mid-line"></view>
			<view class="mid-item">
				<text class="yticon icon-xiaoxi"></text>
				<text>消息</text>
			</view>
		</view>
		<view class="mid-view2">
			<view class="mid-view2-o">
				<text>我的订单</text>
				<text>全部订单</text>
			</view>
			<view class="mid-view2-order">
				<view class="mid-view2-item">
					<text class="yticon">&#xe68e;</text>
					<text>等待报价</text>
				</view>
				<view class="mid-view2-item">
					<text class="yticon">&#xe68e;</text>
					<text>等待雇佣</text>
				</view>
				<view class="mid-view2-item">
					<text class="yticon">&#xe68e;</text>
					<text>等待付款</text>
				</view>
				<view class="mid-view2-item">
					<text class="yticon">&#xe68e;</text>
					<text>等评价</text>
				</view>
			</view>
		</view>
		<uni-list class="list-view">
			<uni-list-item title="列表右侧带箭头" />
			<uni-list-item title="标题文字" :show-extra-icon="true" :extra-icon="{color: '#4cd964',size: '22',type: 'spinner'}"></uni-list-item>
			<uni-list-item title="列表左侧带略缩图" thumb="https://img-cdn-qiniu.dcloud.net.cn/new-page/uni.png" />
		</uni-list>
		
	</view>
</template>

<script>
	import uniList from '@/components/uni-list/uni-list.vue'
	import uniListItem from '@/components/uni-list-item/uni-list-item.vue'
	
	export default {
		components: {
			uniList,
			uniListItem
		},
		data() {
			return {
				title: 'user'
			}
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

<style lang='scss'>
	%flex-center {
	 display:flex;
	 flex-direction: column;
	 justify-content: center;
	 align-items: center;
	}
	%section {
	  display:flex;
	  justify-content: space-around;
	  align-content: center;
	  background: #fff;
	  border-radius: 10upx;
	}
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background-color: #F8F8FF;
	}
	.header-view{
		display: flex;
		height: 200upx;
		width: 750upx;
		padding: 100upx 30upx 0;
		position:relative;
		.bg{
			position:absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			filter: blur(1px);
			opacity: .7;
		}
	}
	.user-info-box{
		height: 180upx;
		display:flex;
		justify-content: center;
		position:relative;
		z-index: 1;
		margin-left: 30upx;
		top: 30upx;
		.icon{
			width: 130upx;
			height: 130upx;
			border:5upx solid #fff;
			border-radius: 50%;
		}
		.nick-name{
			display: flex;
			flex-direction: column;
			margin-left: 20upx;
		}
	}
	.mid-view{
		display: flex;
		flex-direction: row;
		align-items: center;
		width: 750upx;
		height: 80upx;
		background-color: #FFFFFF;
		.mid-item{
			flex: 1;
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
			.yticon{
				color: #09BB07;
			}
		}
		
		.mid-line{
			width: 5upx;
			height: 60upx;
			background-color: #BEBEBE;
		}
	}
	.mid-view2{
		margin-top: 20upx;
		display: flex;
		flex-direction: column;
		width: 750upx;
		background-color: #FFFFFF;
		.mid-view2-o{
			margin-top: 20upx;
			line-height: 30upx;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
		}
		.mid-view2-order{
			display: flex;
			flex-direction: row;
			.mid-view2-item{
				display: flex;
				flex: 1;
				justify-content: center;
				align-items: center;
			}
		}
	}
	.list-view{
		margin-top: 20upx;
		width: 750upx;
	}
</style>
